<template>
	<view class="page-container">
		<!-- 轮播图 -->
<!-- 		<u-swiper :list="product.goodPicture" height="340" indicator circular border-radius="20"></u-swiper> -->
		<image :src="product.goodPicture ? product.goodPicture : '/static/default.png'"  mode="widthFix" style="width: 100%; height: 400rpx; border-radius: 20rpx; display: block;"/>
		<!-- 商品信息 -->
		<view class="info-card u-p-20 u-bg-white u-radius-20 u-m-t-20">
			<view class="u-flex u-row-between u-m-b-10">
				<text class="title">{{ product.goodName }}</text>
				<text class="price">￥{{ product.goodMemberPrice }}</text>
				<text style="font-size: 22px; color: #999; text-decoration: line-through; margin-left: 10rpx;">
				    ￥{{ product.goodOriginalPrice }}
				</text>
			</view>
			<text class="subtext u-m-b-10 u-m-t-10" style="margin-top: 5px;">{{ product.goodClassify }}</text>
		</view>

		<!-- 商品描述 -->
		<view class="info-card u-p-20 u-bg-white u-radius-20 u-m-t-20" style="margin-top: 25px;">
			<text class="section-title">产品描述：</text>
			<text class="desc u-m-t-10">{{ product.goodDesc }}</text>
		</view>

		<!-- 操作栏 -->
		<view class="bottom-bar">
		  <!-- 上面一行：价格 + 数量操作 -->
		  <view class="bar-top u-flex u-row-between u-m-t-10">
		    <text class="total-price">
				￥{{ product.goodMemberPrice }} 
				<text style="color: red;font-size: 12px;margin-left: 10rpx;">到手价</text>
				<text style="color: #999;font-size: 14px;text-decoration: line-through; margin-left: 10rpx;">￥{{ product.goodOriginalPrice }} </text>
			</text>
			<view class="counter u-flex u-row-center">
			  <u-icon name="minus-circle-fill" color="#fa3534" size="20" @click="onReduceClick" />
			  <text style="margin: 10rpx 10rpx 0rpx 10rpx;">{{ count }}</text>
			  <u-icon name="plus-circle-fill" color="#19be6b" size="20" @click="onAddClick" />
			</view>
		  </view>
		
		  <!-- 下方按钮 -->
		  <view class="bar-bottom u-flex u-row-between" >
			
		    <u-button
		      type="default"
		      icon="shopping-cart"
		      plain
		      shape="circle"
		      class="btn btn-left"
			  @click="addCarList"
			  style="position: relative;"
		    >
		      加入购物车
			  <u-badge :value="count" type="error" absolute :offset="[10, 155]" />
		    </u-button>
		    <u-button
		      type="primary"
		      shape="circle"
		      class="btn btn-right"
			  @click="buyProduct"
		    >
		      立即购买
		    </u-button>
		  </view>
		</view>



	</view>
</template>

<script>
	import {getGoodByGoodId } from '@/api/orderArtGoods.js'
	export default {
		data() {
			return {
				count: 1,
				product: {},
				cartList2:[]
			};
		},
		methods: {
			onLoad(options) {
				const foodId = options.id;
				uni.$on('clearCartList2', () => {
					this.count = 1  // 更新角标
					uni.removeStorageSync('cartList2')
				})
				uni.$on('cartUpdated', (newCount) => {
					this.count = newCount  // 更新角标
				})
				console.log('接收到的 food.id:', foodId);
				getGoodByGoodId(foodId).then(res => {
					console.log(res)
					this.product = res.data.goodMes;
					console.log(this.product,"------99")
				})
				.catch(() => {
					uni.showToast({
						type:'error',
						message:'操作失败，请检查网络',
						duration:2000
					});
				});
			},
			// 页面卸载时移除监听，防止内存泄漏
			onUnload() {
			  uni.$off('cartUpdated');
			  uni.removeStorageSync("cartList2");
			},
			//增加数量
			onAddClick() {
			    this.count++;
			  },
			  //减少数量
			  onReduceClick() {
			    if (this.count > 1) this.count--;
			  },
			  buyProduct(){
			  	console.log(this.product,"--------149")
				this.cartList2 = []  // 先清空缓存数组，防止累积
				this.cartList2.push({
				  id: this.product.goodId,
				  name: this.product.goodName,
				  price: this.product.goodMemberPrice,
				  oldPrice:this.product.goodOriginalPrice,
				  quantity: this.count,
				  img:this.product.goodPicture,
				  specText:this.product.goodDesc,
				  campusId:this.product.campusId
				});
				uni.setStorageSync('cartList2',this.cartList2);
				uni.navigateTo({
				  url: '/pages/confireOrder/confireOrder'
				});
			  },
			  addCarList() {
			    // 获取已有购物车数据
			    let cartList = uni.getStorageSync('cartList') || [];
			  
			    // 检查是否已存在该商品
			    let index = cartList.findIndex(item => item.id === this.product.goodId);
			  
			    if (index !== -1) {
			      // 商品已存在，更新数量
			      cartList[index].quantity += this.count;
			    } else {
			      // 不存在，添加新商品
			      cartList.push({
			        id: this.product.goodId,
			        name: this.product.goodName,
			        price: this.product.goodMemberPrice,
			        quantity: this.count,
			        img: this.product.goodPicture,
			        specText: this.product.goodClassify,
			      });
			    }
			  
			    // 保存到本地
			    uni.setStorageSync('cartList', cartList);
			  
			    // 通知上一页刷新（核心）
			    const pages = getCurrentPages();
			    const prevPage = pages[pages.length - 2]; // 上一页
			    if (prevPage && prevPage.$vm && prevPage.$vm.syncFoodCount) {
			      prevPage.$vm.cartList = cartList;
			      prevPage.$vm.syncFoodCount(); // 同步食品列表 count
			    }
			    uni.showToast({
			      title: '已加入购物车',
			      icon: 'success'
			    });
			  },

		},

	};
</script>

<style scoped>
	.page-container {
		padding-bottom: 100rpx;
	}

	.title {
		font-size: 20px;
		font-weight: bold;
	}

	.price {
		color: #e76f51;
		font-size: 20px;
	}

	.subtext {
		font-size: 14px;
		color: #666;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
	}

	.desc {
		font-size: 14px;
		color: #555;
		line-height: 24px;
	}

	.info-card {
		margin: 10px 16px;
	}

	.bottom-bar {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: #fff;
	  padding: 20rpx;
	  border-top: 1px solid #eee;
	  z-index: 999;
	}
	
	.bar-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
	}
	
	.total-price {
	  font-size: 34rpx;
	  font-weight: bold;
	  color: #fa541c;
	}
	.counter {
		display: flex;
		align-items: center;
	}
	.counter u-icon {
	  margin: 0 10rpx;
	}
	
	.bar-bottom {
	  margin-top: 20rpx;
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	}
	
	.btn {
	  flex: 1;
	  margin: 0 10rpx;
	  font-size: 30rpx;
	  height: 80rpx;
	  border-radius: 40rpx;
	}


</style>